<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>注册</title>
	<jsp:include page="../../../main/mp/resource.jsp"	/>
</head>
<body>

<div class="mui-content">
	<form class="mui-input-group">
		<div class="mui-input-row">
			<label>用户名</label>
			<input type="text" class="mui-input-clear" placeholder="请输入用户名">
		</div>
		<div class="mui-input-row">
			<label>密码</label>
			<input type="password" class="mui-input-password" placeholder="请输入密码">
		</div>
		<div class="mui-input-row mui-search">
			<input type="search" class="mui-input-clear" placeholder="">
		</div>

		<div class="mui-input-row mui-checkbox">
			<label>checked：false</label>
			<input name="checkbox1" value="checkbox 1" type="checkbox" >
		</div>
		<div class="mui-input-row mui-checkbox">
			<label>checked：true</label>
			<input name="checkbox1" value="checkbox 2" type="checkbox" checked>
		</div>
		<div class="mui-input-row mui-checkbox mui-disabled">
			<label>disabled checkbox</label>
			<input name="checkbox1" type="checkbox" disabled="disabled" checked value="checkbox disabled">
		</div>

		<h5 class="mui-content-padded">图标右对齐</h5>
		<div class="mui-card">

			<div class="mui-input-row mui-radio">
				<label>radio</label>
				<input name="radio1" type="radio" value="radio 1">
			</div>
			<div class="mui-input-row mui-radio" >
				<label>radio</label>
				<input name="radio1" type="radio" checked value="radio 2">
			</div>
			<div class="mui-input-row mui-radio mui-disabled">
				<label>disabled radio</label>
				<input name="radio1" type="radio" disabled="disabled" value="radio disabled">
			</div>

		</div>
		<h5 class="mui-content-padded">列表模式的单选框</h5>
		<ul class="mui-table-view mui-table-view-radio">
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right">
					Item 1
				</a>
			</li>
			<li class="mui-table-view-cell mui-selected">
				<a class="mui-navigate-right">
					Item 2
				</a>
			</li>
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right">
					Item 3
				</a>
			</li>
		</ul>

		<div class="mui-content-padded">
			<h5 class="mui-content-padded">原生 SELECT</h5>
			<select class="mui-btn mui-btn-block">
				<option value="item-1">item-1</option>
				<option value="item-2">item-2</option>
				<option value="item-3">item-3</option>
				<option value="item-4">item-4</option>
				<option value="item-5">item-5</option>
			</select>
			<br />
			<p>原生 SELECT（选择框）在不同的设备上UI可能会有差异，并且不支持多级联动(多个 SELECT 可实现，但较麻烦)，故mui封装了picker组件，参见如下示例。</p>
			<h5 class="mui-content-padded">普通示例</h5>
			<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>
			<input type="hidden" name="userPicker" id="userPicker"/>
			<h5 class="mui-content-padded">级联示例</h5>
			<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>二级联动示例 ...</button>
			<input type="hidden" name="cityPicker" id="cityPicker"/>
			<button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>
			<input type="hidden" name="cityPicker3" id="cityPicker3"/>
		</div>


		<div class="mui-content-padded">
			<h5 class="mui-content-padded">常规示例</h5>
			<button id='demo1' data-options='{}' class="btn mui-btn mui-btn-block" type="button">选择日期时间 ...</button>
			<h5 class="mui-content-padded">设定年份区间</h5>
			<button id='demo2' data-options='{"type":"date","beginYear":2014,"endYear":2016}' class="btn mui-btn mui-btn-block" type="button">选择日期 ...</button>
			<h5 class="mui-content-padded">设定选中的时间</h5>
			<button id='demo3' data-options='{"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020}' class="btn mui-btn mui-btn-block" type="button">选择日期时间 ...</button>
			<h5 class="mui-content-padded">指定类型</h5>
			<button id='demo4' data-options='{"type":"date"}' class="btn mui-btn mui-btn-block" type="button">选择日期 ...</button>
			<button id='demo5' data-options='{"type":"time"}' class="btn mui-btn mui-btn-block" type="button">选择时间 ...</button>
			<button id='demo6' data-options='{"type":"month"}' class="btn mui-btn mui-btn-block" type="button">选择月份 ...</button>
			<h5 class="mui-content-padded">自定义数据</h5>
			<button id='demo7' type="button" data-options='{"type":"hour","customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"},{"text":"晚上","value":"晚上"}]},"labels":["年", "月", "日", "时段", "分"]}' class="btn mui-btn mui-btn-block">选择时段 ...</button>
			<div id='result' class="ui-alert"></div>
		</div>
		<div class="mui-button-row">
			<button type="button" class="mui-btn mui-btn-primary" >确认</button>
			<button type="button" class="mui-btn mui-btn-danger" >取消</button>
		</div>

		<textarea id="textarea2" rows="5" name="textarea2" placeholder="多行文本框"></textarea>

	</form>
	<div class="mui-input-row" style="margin: 10px 5px;">
		<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
	</div>
</div>

</body>

<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能


    });
    // 动态添加的Input组件需要重新进行初始化
    mui('.mui-input-row input').input();
	/*
	 mui('.mui-input-group').on('change', 'input', function() {
	 var value = this.checked?"true":"false";
	 this.previousElementSibling.innerText = "checked："+value;
	 });
	 ;*/
	/*
	 $(':checkbox[name="checkbox1"]').click(function(){
	 $(':checked[name="checkbox1"]').each(function(){
	 alert($(this).val());
	 })
	 });
	 $(':radio[name="radio1"]').click(function(){
	 $(':checked[name="radio1"]').each(function(){
	 alert($(this).val());
	 })
	 });

	 $(function(){
	 $(":button").click(function(){
	 $('.mui-input-group :input').each(function(){
	 alert($(this).val());
	 });
	 })
	 })*/
    $('#showUserPicker').click(function(){
        var picker = new mui.PopPicker();
        picker.setData([{
            value: 'ywj',
            text: '董事长 叶文洁'
        }, {
            value: 'aaa',
            text: '总经理 艾AA'
        }, {
            value: 'lj',
            text: '罗辑'
        }, {
            value: 'ymt',
            text: '云天明'
        }, {
            value: 'shq',
            text: '史强'
        }, {
            value: 'zhbh',
            text: '章北海'
        }, {
            value: 'zhy',
            text: '庄颜'
        }, {
            value: 'gyf',
            text: '关一帆'
        }, {
            value: 'zhz',
            text: '智子'
        }, {
            value: 'gezh',
            text: '歌者'
        }]);
        picker.pickers[0].setSelectedValue($('#userPicker').val(), 2000);
        picker.show(function (selectItems) {
            $('#showUserPicker').text(selectItems[0].text);
            $('#userPicker').val(selectItems[0].value);
            picker.dispose();
        })

    });

    $('#showCityPicker').click(function(){
        var cityPicker = new mui.PopPicker({
            layer: 2
        });
        cityPicker.setData(cityData);
        var cityPickerVal = $('#cityPicker').val();
        if(cityPickerVal != ""){
            var arr = cityPickerVal.split("-");
            if(arr.length == 2){
                cityPicker.pickers[0].setSelectedValue($.trim(arr[0]));
                setTimeout(function(){
                    cityPicker.pickers[1].setSelectedValue($.trim(arr[1]));
                },100);
            }
        }

        cityPicker.show(function(selectItems) {
            $('#showCityPicker').text(selectItems[0].text+"-"+selectItems[1].text);
            $('#cityPicker').val(selectItems[0].value+"-"+selectItems[1].value);
            cityPicker.dispose();
        })

    });

    $('#showCityPicker3').click(function(){
        var cityPicker3 = new mui.PopPicker({
            layer: 3
        });
        cityPicker3.setData(cityData3);
        var cityPickerVal3 = $('#cityPicker3').val();
        if(cityPickerVal3 != ""){
            var arr = cityPickerVal3.split("-");
            if(arr.length == 3){
                cityPicker3.pickers[0].setSelectedValue($.trim(arr[0]));
                setTimeout(function(){
                    cityPicker3.pickers[1].setSelectedValue($.trim(arr[1]));
                },100);
                setTimeout(function(){
                    cityPicker3.pickers[2].setSelectedValue($.trim(arr[2]));
                },200);
            }
        }
        cityPicker3.show(function(selectItems) {
            $('#showCityPicker3').text(selectItems[0].text+"-"+selectItems[1].text+"-"+selectItems[2].text);
            $('#cityPicker3').val(selectItems[0].value+"-"+selectItems[1].value+"-"+selectItems[2].value);
            cityPicker3.dispose();
        })

    });


    $('#demo1').click(function(){
        var dtPicker = new mui.DtPicker({"type":"datetime"});
        dtPicker.show(function (selectItems) {
            $('#demo2').text(selectItems.y.value+"-"+selectItems.m.value + "-"+ selectItems.d.value+" "+selectItems.h.value+":"+selectItems.i.value);
            dtPicker.dispose();
        })
    });

    $('#demo2').click(function(){
        var dtPicker = new mui.DtPicker({"type":"date","beginDate":new Date(2016,4),"endDate":new Date(2016,9)});
        dtPicker.show(function (selectItems) {
            $('#demo2').text(selectItems.y.value+"-"+selectItems.m.value + "-"+ selectItems.d.value);
            dtPicker.dispose();
        })
    });
    $('#demo3').click(function(){
        var dtPicker = new mui.DtPicker({"type":"datetime","value":"2017-01-10 10:10","beginYear":2010,"endYear":2020});
        dtPicker.show(function (selectItems) {
            $('#demo3').text(selectItems.y.value+"-"+selectItems.m.value + "-"+ selectItems.d.value+" "+selectItems.h.value+":"+selectItems.i.value);
            dtPicker.dispose();
        })
    });
    $('#demo4').click(function(){
        var dtPicker = new mui.DtPicker({"type":"date"});
        dtPicker.show(function (selectItems) {
            $('#demo4').text(selectItems.y.value+"-"+selectItems.m.value + "-"+ selectItems.d.value);
            dtPicker.dispose();
        })
    });
    $('#demo5').click(function(){
        var dtPicker = new mui.DtPicker({"type":"time"});
        dtPicker.show(function (selectItems) {
            $('#demo5').text(selectItems.h.value+":"+selectItems.i.value);
            dtPicker.dispose();
        })
    });
    $('#demo6').click(function(){
        var dtPicker = new mui.DtPicker({"type":"month"});
        dtPicker.show(function (selectItems) {
            $('#demo6').text(selectItems.y.value+"-"+selectItems.m.value );
            dtPicker.dispose();
        })
    });


</script>
</html>